<template>
  <el-card>
    <div class="title">教学日志</div>
    <el-button type="primary" style="margin-bottom: 20px;" @click="addLogDialogVisible = true">添加日志</el-button>
    <el-table
        :data="logsData"
        style="width: 100%"
        row-key="id"
        border
    >
      <el-table-column prop="date" label="日期" width="180px" />
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column prop="classHour" label="课时" width="120px" />
      <el-table-column prop="content" label="教学内容" />
      <el-table-column label="操作" width="200px">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="editLog(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteLog(row.value)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或编辑日志的对话框 -->
    <el-dialog v-model="addLogDialogVisible" title="添加日志" width="30%">
      <el-form :model="logForm" :rules="logRules" ref="logFormRef">
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="logForm.date" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="logForm.courseName" placeholder="输入课程名称" />
        </el-form-item>
        <el-form-item label="课时" prop="classHour">
          <el-input v-model.number="logForm.classHour" placeholder="输入课时" type="number" />
        </el-form-item>
        <el-form-item label="教学内容" prop="content">
          <el-input v-model="logForm.content" type="textarea" placeholder="输入教学内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="addLogDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitLog">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElInput, ElTextarea, ElDatePicker } from 'element-plus';
import { DateToTimestamp, timestampToDate } from "@/util/time.utils";

// 模拟的日志数据
const logsData = ref([{
  value: 1,
  date: '2024-07-15',
  courseName: 'Vue3',
  classHour: 2,
  content: 'Vue3 课程介绍',
}
]);

logsData.value.push({
  value: 2,
  date: '2024-07-16',
  courseName: 'Vue3',
  classHour: 2,
  content: 'Vue3 实战',
}
);

// 对话框的显示
const addLogDialogVisible = ref(false);

// 表单数据
const logForm = reactive({
  date: '',
  courseName: '',
  classHour: 0,
  content: '',
});

// 表单验证规则
const logRules = reactive({
  date: [
    { type: 'date', required: true, message: '日期不能为空', trigger: 'blur' }
  ],
  courseName: [
    { required: true, message: '课程名称不能为空', trigger: 'blur' }
  ],
  classHour: [
    { type: 'number', required: true, message: '课时不能为空', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '教学内容不能为空', trigger: 'blur' }
  ],
});

const logFormRef = ref(null);

const editLog = (row: any ) => {
  // 填充表单数据以编辑日志
  logForm.date = row.date;
  logForm.courseName = row.courseName;
  logForm.classHour = row.classHour;
  logForm.content = row.content;
  addLogDialogVisible.value = true;
};

const deleteLog = (idToDelete: number) => {
    // 过滤掉具有指定ID的日志
    logsData.value = logsData.value.filter(log => log.value !== idToDelete);
    console.log('删除日志，ID:', idToDelete);
};

const submitLog = () => {
  // 表单提交逻辑
  // 校验表单
  console.log('提交的日志数据：', logForm);
  // 提交表单后，关闭对话框并清空表单数据
  addLogDialogVisible.value = false;
  logsData.value.push({
    value: logsData.value[logsData.value.length - 1].value + 1,
    date: String(timestampToDate(DateToTimestamp(logForm.date).toString())),
    courseName: logForm.courseName,
    classHour: logForm.classHour,
    content: logForm.content,
  });
};

</script>

<style scoped>
.title {
  font-size: 20px;
  margin-bottom: 10px;
}
</style>